<template>
	<view class="body">
		<uni-collapse>
			<uni-collapse-item title="参观预约" :show-animation="false" thumb="/static/images/tip.png">
						<view class="content-box">
							<view class="box-first">
								<view class="title">
									<view class="title-one">观众可通过“广州考古 南汉二陵博物馆”微信公众号进行实名预约。预约路径：</view>
									<view class="title-two">【康陵遗址区每天限流1000人】</view>
								</view>
								<view class="box-first-content">
									<view class="left">
										<view class="">①扫描下方二维码直接预约</view>
										<image src="../../static/images/qr.4f7d7180.png" mode=""></image>
									</view>
									<view class="right">
										<view class="">②关注“广州考古 南汉二陵博物馆”微信公众号</view>
										<view class="">公众号</view>
										<view class="img-box">
											<image src="http://8.138.83.48:9000/library/tip/next.png" mode=""></image>
										</view>
										<view class="">博物馆</view>
										<view class="img-box">
											<image src="http://8.138.83.48:9000/library/tip/next.png" mode=""></image>
										</view>
										<view class="">参观预约</view>
									</view>
								</view>
							</view>
							<view class="box-second">
								<view class="title">观众可登录携程旅行APP和小程序、高德地图、百度地图进行实名制预约。</view>
								<view class="img-list">
									<image src="../../static/images/xiecheng.png" mode=""></image>
									<image src="../../static/images/gaode.png" mode=""></image>
									<image src="../../static/images/baidu.png" mode=""></image>
								</view>
							</view>
							<view class="box-third">
								<view class="title">电话预约</view>
								<view class="phone-box">
									<view class="phone">020-31360991</view>
								</view>
							</view>
						</view>
				</uni-collapse-item>
			
			<uni-collapse-item title="开放信息" :show-animation="false" thumb="/static/images/tip.png">
				<view class="visit-info-box" style="width: (ww -80) + 'px';">
					<view class="visit-time-box">
						<text class="visit-title">开放时间\n</text>
						<view class="visit-time-content">
							<text class="visit-time">  09:00-17:30</text>
							<text>(17:00停止进场)\n</text>
							<text>*逢周一闭馆（节假日及特殊情况除外）\n</text>
							<text>*康陵遗址区每日限流1000人 \n</text>
						</view>
					</view>
					<view class="visit-address-box">
						<text class="visit-title">地址\n</text>
						<view class="visit-address-content">
							<text>博物馆区：广州市番禺区大学城华师一路8号，参观入口在博物馆南门（国医西路）\n</text>
							<text>康陵遗址：广州市番禺区大学城康陵路（博物馆区西侧，从南门步行5分钟可达）\n</text>
						</view>
					</view>
				</view>
			</uni-collapse-item>
			<uni-collapse-item title="导览服务" :show-animation="false" thumb="/static/images/tip.png">
					<view class="talk-time">
						<view class="visit-title">免费讲解时间</view>
						<view class="talk-time-content">上午10:00 下午3:00</view>
					</view>
					<view class="talk-address">
						<view class="visit-title">讲解结合地点</view>
						<view class="talk-address-content">展览中心大厅入口</view>
					</view>
			</uni-collapse-item>
			<uni-collapse-item title="交通信息" :show-animation="false" thumb="/static/images/tip.png">
				<view class="visit-address">
					<view class="title-box">
						<image src="../../static/images/address.png" mode=""></image>
						<view class="visit-title">地址</view>
					</view>
					<view class="visit-address-content">
						<text>博物馆区：广州市番禺区大学城华师一路8号，参观入口在博物馆南门（国医西路）\n</text>
						<text>康陵遗址：广州市番禺区大学城康陵路（博物馆区西侧，从南门步行5分钟可达）\n</text>
					</view>
				</view>
				<view class="visit-bus">
					<view class="title-box">
						<image src="../../static/images/bus.png" mode=""></image>
						<view class="visit-title">公交</view>
					</view>
					<view class="visit-bus-content">
						<text>方案一：332路、384路、番201路、86路、387路广大附中站\n</text>
						<text>方案二：86路、番201路南汉二陵博物馆站</text>
						<text>方案三：博物馆专线 （节假日发车）</text>
						<text>康陵遗址：广州市番禺区大学城康陵路（博物馆区西侧，从南门步行5分钟可达）\n</text>
					</view>
				</view>
				<view class="visit-subway">
					<view class="title-box">
						<image src="http://8.138.83.48:9000/library/tip/subway.png" mode=""></image>
						<view class="visit-title">地铁</view>
					</view>
					<view class="visit-subway-content">
						<text>方案一：4号线大学城北站\n</text>
						<text>方案二：4号线、7号线大学城南站</text>
					</view>
				</view>
				<view class="visit-park-car">
					<view class="title-box">
						<image src="http://8.138.83.48:9000/library/tip/parkCar.png" mode=""></image>
						<view class="visit-title">停车指引</view>
					</view>
					<view class="visit-park-car-content">
						<text>博物馆设有免费露天停车场（可停泊小车及旅游大巴）\n</text>
						<text>康陵遗址区不设停车场，请停好车后步行前往参观。</text>
					</view>
				</view>
			</uni-collapse-item>
			<uni-collapse-item title="参观贴士" :show-animation="false" thumb="/static/images/tip.png">
					<view class="tip">
						<view>一、观众需凭有效身份证在取票机领取参观券，持其他证件如学生证、护照、驾驶证等的观众请寻求人工服务，20人以上的团体观众需提前预约。</view>
						<view>二、请自觉接受安检，严禁将易燃易爆、管制械具等危险品带入馆内。</view>
						<view>三、请勿携带宠物入馆。</view>
						<view>四、本馆全面禁止吸烟。</view>
						<view>五、行动不便、身体有潜在疾病的观众需有成年人陪同方可入馆参观。</view>
						<view>六、醉酒者、衣冠不整者谢绝入馆。</view>
						<view>七、请勿在展厅内使用自拍杆、三脚架、闪光灯拍照。</view>
						<view>八、请注意清洁卫生、爱护展品和建筑设施；参观时请与展品保持一定距离。</view>
						<view>九、请爱护公共设施，保持公共卫生，在展馆内勿随意投掷、丢弃杂物。	</view>
						<view>十、请自觉遵守公共秩序，请勿喧哗、追逐打闹、攀爬躺卧，勿在展馆内使用轮滑、暴走鞋等类似轮式鞋。</view>
						<view>十一、注意安全，如遇紧急情况请听从现场工作人员指挥。</view>
						<view>十二、寄存包裹时，贵重物品请自行保管。</view>
						<view>十三、我馆配套便民措施：电子自助寄存柜、饮水机、雨伞架、擦鞋机、轮椅、拐杖、婴儿车、雨伞、披肩等，欢迎使用。</view>
						<view>十四、如需其他帮助，请及时联系工作人员。联系电话：020-31360991</view>
					</view>
			</uni-collapse-item>
		</uni-collapse>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//系统属性
				sysInfo: {},
				//手机屏幕高度
				wh: 0,
				ww: 0
			};
		},
		methods: {
			//设置屏幕高度
			setSysInfo() {
				const sysInfo = uni.getSystemInfoSync()
				const wh = sysInfo.windowHeight 
				this.sysInfo = sysInfo
				this.wh = wh
				this.ww = sysInfo.windowWidth 
				// console.log("sys: "+this.sysInfo.windowHeight)
			},
		},
		onLoad(options) {
			this.setSysInfo()
		}
	}
</script>

<style lang="scss">
.body {
	@keyframes animated-border {
	  0% {
	    box-shadow: 0 0 0 0 rgba(158, 249, 255, 0.4);
	  }
	  100% {
	     box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
	  }
	}
	margin: 10px;
	
	//参观预约
	.content-box {
		.box-first {
			margin: 0 10px;
			.title {
				.title-one {
					font-size: 18px;
					font-weight: bold;
				}
				.title-two {
					color: #693a09;
				}
			}
			.box-first-content {
				display: flex;
				margin: 10px;
				.left {
					display: flex;
					flex-direction: column;
					margin-right: 5px;
					image {
						height: 100px;
						width: 100px;
					}
				}
				.right {
					display: flex;
					flex-direction: column;
					.img-box {
						display: flex;
						justify-content: center;
						width: 50px;
						image {
							height: 10px;
							width: 10px;
						}
					}
					
				}
			}
		}
		.box-second {
			margin: 0 10px;
			.title {
				font-size: 18px;
				font-weight: bold;
			}
			.img-list {
				display: flex;
				justify-content: space-around;
				image {
					height: 50px;
					width: 50px;
				}
			}
		}
		.box-third {
			margin: 10px 10px 0 10px;
			.title {
				font-size: 18px;
				font-weight: bold;
			}
			.phone-box {
				padding: 0 5px;
				font-size: 15px;
			}
		}
	}
	
	// 开放信息	
	.visit-info-box {
		border-right: 3px solid rgb(255, 255, 255);
		border-bottom: 3px solid rgb(255, 255, 255);
		border-radius: 20px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		animation: animated-border 1.5s infinite;
		
		.visit-time-box {
			padding: 0 10px;
			.visit-title {
				font-size: 20px;
				font-weight: bold;
			}
			.visit-time-content {
				padding: 5px;
				font-size: 17px;
				.visit-time {
					font-size: 20px;
					font-weight: bold;
					margin: 2px;
				}
			}	
			
		}
		
		.visit-address-box {
			padding: 10px;
			.visit-title {
				font-size: 20px;
				font-weight: bold;
			}
			.visit-address-content {
				padding: 5px;
				font-size: 17px;
			}
		}
		
	}
		
	//标题的公共样式
	.title-box {
		display: flex;
		height: 40px;
		image {
			height: 40px;
			width: 40px;
		}
		.visit-title {
			height: 40px;
			line-height: 40px;
			font-size: 20px;
			font-weight: bold;
			margin: 0 0 5px 0;
		}
	}
	
	// 导览服务
	.talk-time {
		margin: 0 10px;
		
		.visit-title {
			font-size: 20px;
			font-weight: bold;
			margin: 0 0 5px 0;
		}
		.talk-time-content {
			padding: 5px;
		}
	}
	.talk-address {
		margin: 0 10px;
		.visit-title {
			font-size: 20px;
			font-weight: bold;
			margin: 0 0 5px 0;
		}
		.talk-address-content {
			padding: 5px;
		}
	}
	
	
	.visit-address {
		margin: 0 10px;
		.visit-address-content {
			padding: 5px 10px;
			font-size: 17px;
		}
	}
	.visit-bus {
		margin: 0 10px;
		.visit-bus-content {
			padding: 5px 10px;
			font-size: 17px;
		}
	}
	.visit-subway {
		margin: 0 10px;
		.visit-subway-content {
			padding: 5px 10px;
			font-size: 17px;
		}
	}
	.visit-park-car {
		margin: 0 10px;
		.visit-park-car-content {
			padding: 5px 10px;
			font-size: 17px;
		}
	}
	
	//参观贴士
	.tip {
		margin: 0 10px;
	}
	
}
</style>
